<template>
    <div class="page-100 repair-adddes-layout">
        <textarea
                v-model="desfault"
                class="weui-textarea des-fault-part"
                placeholder="请描述故障"
                rows="5"
                maxlength="200"></textarea>

        <div class="des-image-part" v-show="isShowImage" @click="addImgHandler">
            <span><img src="../../assets/add_img.png"></span>
            <span>上传图片</span>
        </div>

        <!--图片显示组件-->
        <ImageShowComponent
                :imageList="images"
                :isShowDelLogo="true"
                v-on:imageDeleteEvent="deleteImgHandler"
                v-on:imageHideEvent="hideImgHandler"
                class="left-sp bottom-line-part"/>

        <!--发送按钮-->
        <yd-button size="large" type="primary" @click.native="handleClick" style="background-color:#3cc8a8;color:white;height: 50px">发送</yd-button>

    </div>
</template>

<script>
    import ImageShowComponent from "@/components/ImageShowComponent.vue";
    import {sendOrderMessageBoard,uploadQiNiuImage} from "../../pcof/post";
    import {userInfoData,openId} from '../../globalVariables'
    export default {
        name: "repairAddDescription",
        data() {
             return {
                 images: [],
                 desfault: '',
                 // images: [
                 //     'http://static.ydcss.com/uploads/ydui/1.jpg',
                 //     'http://static.ydcss.com/uploads/ydui/2.jpg',
                 //     'http://static.ydcss.com/uploads/ydui/3.jpg'
                 // ],
                 uploadToken: '',
                 taskUUid: '',
                 isShowImage: true,
                 serverIds: '',
             }
        },
        components: {
            ImageShowComponent,
        },
        created() {
            //接受上个页面传值 在实例创建完成后被立即调用
            this.taskUUid = this.$route.params.taskUUid;
        },
        methods: {
            handleClick() {

                if (this.desfault === null || this.desfault === '') {
                    this.$dialog.toast({
                        mes: "请描述故障！",
                        timeout: 1500
                    });
                    return;
                }

                this.orderMessageWXUploadImgFunc();
            },
            orderMessageWXUploadImgFunc() {
                this.$dialog.loading.open('发送中...');

                if (this.images.length > 0) {
                    let that = this;
                    wx.uploadImage({
                        localId: that.images[0].toString(),
                        isShowProgressTips: 0,
                        success: function (res) {
                            that.serverIds = res.serverId;
                            that.uploadQiNiuImageFunc();
                        }
                    });
                } else {
                    this.sendOrderMessageBoardFunc('');
                }

            },
            async uploadQiNiuImageFunc() {
                var response = await uploadQiNiuImage(
                    JSON.parse(localStorage.getItem(userInfoData)).mobile,
                    this.serverIds,
                    localStorage.getItem(openId)
                );
                if (response.data.code === 200) {
                    this.sendOrderMessageBoardFunc(response.data.msg);
                } else {
                    this.$dialog.loading.close();
                    this.serverIds = '';
                    this.idx=0;
                    this.$dialog.toast({
                        mes: "上传图片失败，请重试！",
                        icon: 'error',
                        timeout: 1500
                    });
                }
            },
            async sendOrderMessageBoardFunc(image) {
                var response = await sendOrderMessageBoard(
                    JSON.parse(localStorage.getItem(userInfoData)).mobile,
                    this.taskUUid,
                    this.desfault,
                    image,
                );
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.$router.back();
                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            addImgHandler() {
                let that = this;
                wx.ready(function () {
                    wx.chooseImage({
                        count: 1,
                        sizeType: ['compressed'],// 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album','camera'], //'album', 'camera' 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            that.isShowImage =  false;
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            that.images=[...that.images,...localIds];
                        }
                    })
                });
            },
            deleteImgHandler(payload) {
                var index = payload.index;
                this.$dialog.confirm({
                    title: '',
                    mes: '是否要删除该图片？',
                    opts: () => {
                        this.images.splice(index,1);
                        this.isShowImage = true;
                    }
                });
            },
            hideImgHandler(payload) {
                var index = payload.index;
                this.isShowImage = true;
            }
        }
    }
</script>

<style lang="scss">
    .repair-adddes-layout {
        background: #ffffff;

        .des-fault-part {
            border: 0;
            font-size: 1.2em;
            text-align: left;
            padding-top: 0.3rem;
            padding-left: 0.3rem;
            padding-right: 0.3rem;
            background: #ffffff;
        }

        .send-button-part {
            margin-left: 0.6rem;
            margin-right: 0.6rem;
        }

        .des-image-part {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 1.8rem;
            height: 1.8rem;
            border:1px solid #e1e1e1;
            padding-top: 0.3rem;
            margin-left: 0.2rem;
            background: #ffffff;
        }

        .weui-btn {
            display: flex;
            height: 0.6rem;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
        }
    }
</style>